<template>
	<div class="combination-list">
		<List size="large" :class="{ listBorder: listBorder }">
			<ListItem
				:class="{ moveColor: moveColor == index ,selectColor:selectColor==index}"
                class="combination-list-item"
				v-for="(item, index) in listData"
				@mousemove.native="moveListItem(index,'moveColor')"
                @click.native="moveListItem(index,'selectColor')"
				@mouseleave.native="moveListItem(null,'moveColor')"
				:key="index"
				>{{ item.title }}
                

                 <span class='treeTool' v-if="(selectColor==index)&&(moveColor==index)&&icon" >
                            <span class="treeButton"  v-for=" (item,index) in icon" :key="index">
                                            <span class="treeButtonBox">
                                            <Icon type="ios-add"  v-if="item=='add'" @click="iconClick('add')" size='20'  />
                                            <Icon type="ios-brush"    v-if="item=='edit'"  @click="iconClick('edit')"   size='20'  />
                                            <Icon type="ios-close"  v-if="item=='del'" @click="iconClick('del')"  size='20'  />
                                            </span>         
                            </span>
                        </span>
                
                </ListItem
			>
		</List>
	</div>
</template>

<script>
export default {
	name: 'combination-list',
	components: {},
	props: {
		listBorder: {
			type: Boolean,
			default: true,
		},
        listData: Array,
        icon:{
            type:Array,
            default:function(){
                return["add","edit","del"]
            }
        }
	},
	data() {
		return {
            moveColor: null,
            selectColor:0,
		}
	},
	watch: {},
	computed: {},
	methods: {
		moveListItem(index,item) {
            this[item] = index
        },
        iconClick(val){
            this.$emit("iconClick",val)
        }
	},
	created() {},
	mounted() {},
}
</script>
<style lang="less" scoped>
.combination-list {
	width: 100%;
	height: 100%;
    overflow: auto;

 
    
}
.combination-list-item{
    padding-left: 16px;
      border-radius: 5px;
    position: relative;
    height: 36px;
}
&/deep/ .ivu-list-split .ivu-list-item {
	border-bottom: none;
}
.moveColor {
	background-color: #f8f8f9;
}
.selectColor{
    background-color: #2d8cf0 !important;
    color:  white;
}
 .treeTool{
     cursor: pointer;
      position: absolute;
      right: 5px;
      top:  calc(50% - 10px);
      display: inline-block;
      width: auto;
      height: 20px;
      padding: 0;
      margin: 0;
      white-space:nowrap;
      .treeButton{
        .treeButtonBox{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        position: relative;
        top: 0px;
        width: 20px;
        height: 100%;
        color: #000000!important;
              display: inline-block;
              
              background-color: white;
      }
    }
</style>